<template>
  <div class="drawer-container">
    <fks-row
      :gutter="16"
      type="flex"
      justify="center"
    >
      <fks-col
        :xs="20"
        :sm="18"
        :md="18"
        :lg="12"
        :xl="12"
      >
        <div class="title">
          <i class="fks-title-icon" />
          <span> {{ LANG.AUDIT_SETTING }} </span>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              <span> {{ LANG.LOG_BACKUP_TIME }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style=" font-size: 14px;line-height: 20px;"
                  class="tips-container"
                >
                  {{ LANG.LOG_BACKUP_TIME_DESC }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <div>
              <fks-input-number
                v-model="form.logStorageDuration"
                :min="30"
              />
              <span style="margin-left: 20px;">{{ LANG.DAY }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span> {{ LANG.LOG_BACKUP_DEL_TIME }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style=" font-size: 14px;line-height: 20px;"
                  class="tips-container"
                >
                  {{ LANG.LOG_BACKUP_DEL_TIME_DESC }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <div>
              <fks-input-number
                v-model="form.backupStorageDuration"
                :min="30"
              />
              <span style="margin-left: 20px;">{{ LANG.DAY }}</span>
            </div>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <div class="btn">
      <fks-button
        v-permission:1="['logsetting:resolve']"
        icon="fks-icon-turn-right"
        @click="initData"
      >
        {{ LANG.REDUCTION }}
      </fks-button>
      <fks-button
        v-permission:1="['logsetting:update']"
        type="primary"
        icon="fks-icon-check"
        @click="submit"
      >
        {{ LANG.UPDATE }}
      </fks-button>
    </div>
  </div>
</template>
<script>
import { configLog, configUsing } from './api'
import Mix from '@/mixins/module'
export default {
  name: 'AuditConfig',
  mixins: [Mix],
  data() {
    return {
      form: {
        logStorageDuration: 30,
        backupStorageDuration: 30
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //当前配置
    init() {
      configUsing().then((res) => {
        if (res.status) {
          this.form.logStorageDuration = res.data.logStorageDuration
          this.form.backupStorageDuration = res.data.backupStorageDuration
        }
      })
    },
    //还原配置
    initData() {
      configUsing().then((res) => {
        if (res.status) {
          this.form.logStorageDuration = res.data.logStorageDuration
          this.form.backupStorageDuration = res.data.backupStorageDuration
          this.$message({
            type: 'success',
            message: this.LANG.REDUCTION_TIP
          })
        }
      })
    },
    //提交新的配置
    submit() {
      let params = {
        logStorageDuration: this.form.logStorageDuration,
        backupStorageDuration: this.form.backupStorageDuration
      }
      configLog(params)
        .then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: this.LANG.UPDATE_SUCCESS
            })
          }
        })
        .catch(() => {
          // this.$message({
          //   type: 'error',
          //   message: '保存失败'
          // })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-divider--horizontal {
  margin: 0;
}

::v-deep .fks-input-number {
  span {
    background: #fff;
  }
}

::v-deep .fks-tooltip__popper {
  .tips-container {
    font-size: 20px;
    line-height: 16px;
  }
}

.drawer-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64px;
    }
  }

  .btn {
    margin-bottom: 36px;
    text-align: center;
  }
}
</style>